<template>
  <div id="picChart"></div>
</template>
<script>
import * as echarts from "echarts";
import{topChart}  from "@/api/user/api";
export default {
  data() {
    return {
      charts: null,
      dataList: [],
      xAxis:[],
      yAxis:[],
    };
  },

  methods: {
    init() {
      this.charts = echarts.init(document.getElementById("picChart"));
    },
    getList() {
      topChart().then(res=>{
        let data=res.data
        this.dataList=data.collect
        this.dataList.forEach((item,index,arr)=>{
          this.xAxis[index]=item.name
          this.yAxis[index]=item.collect
        })
      this.initChart();
      })
    },
    initChart() {
      // 创建echarts实例  获取要展示的区域
      // let nameSum = this.dataList
      // let dataArray = {
      //   xdataName: this.parkList,
      //   contractnum: [0, 0, 0, 0]
      // };
      // this.foreignData.forpark.forEach((item, index, arr) => {
      //   let i = parseInt(item.stValue - 1);
      //   dataArray.contractnum[i] = item.percent;
      // });
      // tooltip
      let tooltip = {
        trigger: "axis",
        textStyle: { fontSize: 14 },
        axisPointer: { type: "cross", label: { backgroundColor: "#283b56" } },
        formatter: v => {
          let [a] = v;
          return `
            <div class='u-p-2'>
                <div>${a.name}：${a.value}</div>
            </div>
        `;
        }
      };
      let title = {
        left: "0%",
        top: "0%",
        text: `收藏量Top4`,
        textStyle: {
          color: "#3C414A",
          fontWeight: "normal",
          fontSize:16
        }
      };
      // grid
      let grid = { top: "25%", left: "10%", right: "10%", bottom: "15%" };

      // xAxis
      let xAxis = {
        type: "category",
        boundaryGap: true,
        data: this.xAxis,
        axisLine: {
          lineStyle: {
            width: 0.5,
            color: "rgba(237, 237, 237,0.8)"
          }
        },
        axisLabel: {
          textStyle: { fontSize: 14, color: "#B7B9BF" },
          rotate: 0
        },
        axisTick: { show: false } //坐标轴刻度
      };

      // yAxis
      let yAxis = {
        type: "value",
        scale: true,
        min: 0,
        name: "",
        axisLine: { lineStyle: { color: "#d60ab9" } },
        axisLabel: {
          textStyle: { fontSize: 14, color: "#B7B9BF" }
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 0.5,
            color: "rgba(237, 237, 237,0.8)"
          }
        }
      };

      // series
      let series = [
        {
          name: "中高风险地区",
          type: "pictorialBar",
          barWidth: 200,
          // 三角矢量柱状图
          symbol:
            "path://M-0.000,431.000 C59.528,394.477 61.000,-0.000 61.000,-0.000 C61.000,-0.000 62.472,394.477 122.000,431.000 L-0.000,431.000 Z",
          // 是否裁剪图形
          symbolClip: false,
          data: this.yAxis,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#635BC2" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(99, 91, 194,0)" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            emphasis: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#F58257" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(247, 166, 129,0.2)" // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              }
            }
          },
          label: {
            show: false,
            position: "top",
            // formatter: params => {
            //   return params.name === dataArray.xdataName[0]
            //     ? `{a|${params.value}}`
            //     : params.name === dataArray.xdataName[1]
            //     ? `{b|${params.value}}`
            //     : params.name === dataArray.xdataName[2]
            //     ? `{c|${params.value}}`
            //     : `{d|${params.value}}`;
            // },
            // rich: {
            //   a: { color: "#ff564c" },
            //   b: { color: "#ffd11a" },
            //   c: { color: "#efff37" },
            //   d: { color: "#32ffee" }
            // },
            textStyle: { fontSize: 16 }
          },
          markLine: {
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#FDB42D",
                label: {
                  show: true
                }
              }
            },
            data: [{ type: "average", name: "平均值" }]
          }
        }
      ];

      // 渲染
      let option = {
        tooltip,
        grid,
        title,
        xAxis,
        yAxis,
        series
      };

      window.addEventListener("resize", () => {
        this.charts.resize();
      });
      this.charts.setOption(option);
    }
  },
  mounted() {
    this.init();
    this.getList();
  }
};
</script>
<style scoped>
#picChart {
  width: 100%;
  height: 170px;
}
</style>